<template>
  <div class="pieAccess" ref="pieAccess">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
const toolarr = ['Unstart','Execute','Finished','Expired']
var that
  export default {
    name: "pieAccess",
    mixins: [resize],
    props:{
      title:'',
      name: '',
      dataList: {},
      rend: false
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
      that = this
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      rend(){
        this.initChart(true)  
      }
    },
    methods: {
      initChart(flag) {
        this.chart = echarts.init(this.$refs.pieAccess)
        this.chart.setOption({
          tooltip: {
          },
          // title:{
          //   text: this.title,
          //   left: 'center',
          // },
          legend: {
            y: 'bottom',
            data: ['未开始', '进行中', '完成', '延期完成', '延期未完成'],
          },
          // grid: {
          //   top: '57%',
          //   left: '8%',
          //   right: '10%',
          //   bottom: '50px',
          //   containLabel: true
          // },
          // xAxis: {
          //   minInterval: 1,
          //   type: 'value'
          // },
          // yAxis: {
          //   show:true,
          //   type: 'category',
          //   data: ['未开始', '进行中', '完成', '延期完成', '延期未完成'],
          // },
          series: 
            {
              name: this.name,
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['53%', '45%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                // borderColor: '#fff',
                borderWidth: 2,
                color: function(params){
                  var colorList = ['#409EFF','#E6A23C','#67C23A','#9966ff','#F56C6C'];
                  return colorList[params.dataIndex]
                }
              },
              label: {
                show: true,
                // position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                }
              },
              labelLine: {
                show: false
              },
              data: [{name:'未开始',value:this.dataList.Unstart.length},{name:'进行中',value:this.dataList.Execute.length},{name:'完成',value:this.dataList.Finished.length},{name:'延期完成',value:this.dataList.Dfinished.length},{name:'延期未完成',value:this.dataList.Expired.length}]
            }
        })
        if(flag){
          this.chart.on('click',function(params){
            that.$emit('handleClick',{first:params.seriesName,second:toolarr[params.dataIndex]})
          })
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .pieAccess {
    width: 100%;
    min-height: 330px;
    height: 100%;
  }
</style>
